<template>
  <div>
    <!-- <hot-table :settings="hotSettings"></hot-table> -->
    <hot-table :settings="hotSettings">
      <!-- <hot-column title="ID"> -->
      <!-- </hot-column> -->
      <!-- <hot-column
        :settings="secondColumnSettings"
        :read-only="false"
      />
      <hot-column
        :settings="thirdColumnSettings"
        :read-only="false"
      /> -->
    </hot-table>
  </div>
</template>

<script>
import { HotTable, HotColumn } from "@handsontable/vue";
import { registerAllModules } from "handsontable/registry";
import { ContextMenu } from "handsontable/plugins/contextMenu";
import "handsontable/dist/handsontable.full.css";

// register Handsontable's modules
registerAllModules();

export default {
  data() {
    return {
      hotSettings: {
        // data: [
        //   [
        //     "2016",
        //     10,
        //     "https://handsontable.com/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg"
        //   ],
        //   [
        //     "2017",
        //     20,
        //     "https://handsontable.com/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg"
        //   ],
        //   ["2018", 30, ""]
        // ],
        data: [
          { id: 1, name: "Ted Right", address: "1" },
          { id: 2, name: "Frank Honest", address: "2" },
          { id: 3, name: "Joan Well", address: "3" },
          { id: 4, name: "Gail Polite", address: "" },
          { id: 5,  address: "",name: "Michael Fair", }
        ],
        // colHeaders: true,
        colHeaders: ["ID", "名称", "Address"],
        // columns: [{ data: "id" }, { data: "name" }, { data: "address" }],
        minSpareRows: 1,
        // width: "150",
        // height: "200",
        // fixedRowsTop: 1,//固定列
        // fixedColumnsLeft: 1,//固定行
        // rowHeights: 55,//列高
        manualColumnResize: true, //列拖动
        manualRowResize: true, //行拖动
        manualColumnMove: true, //列数据移动
        manualRowMove: true, //行数据移动
        //头部提示框
        headerTooltips: {
          rows: false,
          columns: true,
          onlyTrimmed: true
        },
        licenseKey: "non-commercial-and-evaluation",
        contextMenu: {
          items: {
            row_above: {
              name: "向上插入一行"
            },
            row_below: {
              name: "向下插入一行"
            },
            separator: ContextMenu.SEPARATOR,
            clear_custom: {
              name: "清除所有数据",
              callback() {
                this.clear();
              }
            }
          }
        }
      },
      //   第二列
      secondColumnSettings: {
        title: "名称"
      },
      //   第三列
      thirdColumnSettings: {
        title: "图片"
        // renderer(instance, td, row, col, prop, value) {
        //   const img = document.createElement("img");

        //   img.src = value;

        //   img.addEventListener("mousedown", event => {
        //     event.preventDefault();
        //   });

        //   td.innerText = "";
        //   td.appendChild(img);

        //   return td;
        // }
      }
    };
  },
  components: {
    HotTable,
    HotColumn
  }
};
</script>

<style scoped>
</style>